<template>
  <div class="address-pop">
    <div class="address-detail">
      <close-btn @close="handleRegistPopClose"></close-btn>
      <div class="title">选择地区</div>
      <div class="wrapper">
        <div class="province">
          <div class="each" 
            v-for="(item , index) in province" 
            :id="index"
            @click="handleProvinceClick"
          >{{item}}</div>
        </div>
        <div class="centralCity">
          <div class="each letDefault">请选择</div>
          <div class="each" 
            v-for="(item,index) in centralCity" 
            @click="handleCentralCityClick"
            :id="index"
          >{{item}}</div>
        </div>
        <div class="town">
          <div class="each letDefault">请选择</div>
          <div class="each" 
            v-for="(item,index) in town" 
            @click="handleTownClick"
            :id="index"
          >{{item}}</div>
        </div>
        <div class="chosen-button">
          <div class="button confirm" @click="handleCityListConfirm">确定</div>
          <div class="button close" @click="handleRegistPopClose">关闭</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { http } from 'common/verify.js';
import CloseBtn from 'common/close/Close.vue';
export default {
  name: 'AddressProp',
  components: {
    CloseBtn
  },
  data () {
    return {
      province: [],
      provincePointed: '',
      centralCity: [],
      centralCityPointed: '',
      town: [],
      townPointed: '',
      totalAdddress: ''
    }
  },
  methods: {
    handleRegistPopClose () {
      this.$emit('close');
    },
    getProvinceMessage () {
      //获取省
      const _this = this;
      axios.get(http+':8080/city/province').then(function (response) {
      　_this.province = response.data;
      }).catch(function (error) {
      　console.log(error);
      });
    },
    handleProvinceClick (el) {
      //点击省，获取中心城市，并将被选中的省保存下来
      const _this = this;
      const pointed = el.target.innerText;
      const id = el.target.id;
      $('.each').removeClass('each-pointed');
      $('.province .each').eq(id).addClass('each-pointed');
      $('.letDefault').addClass('each-pointed');
      this.provincePointed = pointed;
      this.centralCityPointed = '';
      this.townPointed = '';
      $('.confirm').removeClass('confirm-active');
      axios.get(http+':8080/city/'+pointed)
        .then(function(response){
            _this.centralCity = response.data;
          //const pointed = el.target.innerText;
          //为啥不写在这里，你请别人买苹果，别人没回来，你没苹果
        }).catch(function (error) {
        　console.log(error);
        });
    },
    handleCentralCityClick (el) {
      //点击中心城市，获取镇级列表，并将被选中的中心城市保存下来
      const _this = this;
      const pointed = el.target.innerText;
      const id = Number(el.target.id);
      this.centralCityPointed = pointed;
      this.townPointed = '';
      $('.confirm').removeClass('confirm-active');
      $('.centralCity .each').removeClass('each-pointed');
      $('.centralCity .each').eq(id+1).addClass('each-pointed');
      $('.letDefault').eq(1).removeClass('each-pointed');

      axios.get(http+':8080/city/'+_this.provincePointed+'/'+_this.centralCityPointed)
        .then(function(response){
          _this.town = response.data;
        }).catch(function (error) {
        　console.log(error);
        });
    },
    handleTownClick (el) {
      //点击镇级列表，并将被选中的中心城市保存下来
      const pointed = el.target.innerText;
      this.townPointed = pointed;
       const id = Number(el.target.id);
      $('.town .each').removeClass('each-pointed');
      $('.town .each').eq(id+1).addClass('each-pointed');

      if (this.townPointed!==''){
        $('.confirm').addClass('confirm-active'); 
     }else{
        $('.confirm').removeClass('confirm-active');
     }
    },
    handleCityListConfirm () {
      if (this.centralCityPointed && this.townPointed && this.provincePointed){
        this.totalAdddress = this.provincePointed +' '+this.centralCityPointed +' '+ this.townPointed + '';
        this.$emit('close');
        this.$emit('saveAddress',this.totalAdddress);
      }
    }
  },
  mounted () {
    this.getProvinceMessage()
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/mixins.styl';
  .address-pop
    position: absolute
    top: $headerHeight
    width: 100%
    height: 100%
    z-index: $pop-index
    .address-detail
      position: relative
      width: 12.1rem
      height: auto
      top: 50%
      margin-top: -2.65rem
      left: 50%
      margin-left: -6.05rem
      background: $bgcolor-white
      border: .02rem solid $borderColor
      border-radius: .1rem
      color: $font-black
      .closeX
        position: absolute
        right: 0
        top: 0
        width: .5rem
        height: .5rem
        line-height: .5rem
        font-size: .4rem
        text-align: center
        margin-top: .15rem
        margin-right: .15rem
        overflow: hidden
        .default
          color: #aaa
          cursor: pointer
        .active
          color: $font-blue
          cursor: pointer
    .title
      font-size: .28rem
      font-weight: bold;
      background: #f6f6f6
      border-bottom: .02rem solid $borderColor
      padding: .3rem 0 .2rem .3rem
    .wrapper  
      padding: 0rem .4rem
      font-size: .24rem
      .province,.centralCity,.town
        overflow: auto
        padding: .2rem 0
        border-bottom: .02rem solid $borderColor
      .province
        border-bottom: .03rem solid $borderColor
      .each
        float: left
        padding: 0 .1rem
        line-height: 1.8em
      .each:hover
        background: #ddd
        cursor: pointer
        color: $font-black
      .each-pointed
        background-color: $font-blue
        color: $bgcolor-white
      .city,.county
        .each:nth-child(1):hover
          background: $bgcolor-white
          cursor: default
      .chosen-button
        overflow: auto
        text-align: center
        padding: .3rem 0
        .button
          float: left
          width: 1.3rem
          border: .02rem solid #b1aeae
          border-radius: .1rem
          line-height: .5rem
          background: #eee
          margin-right: .3rem
        .confirm
          color: #999
          background: #e9e9e9
        .confirm-active
          background: linear-gradient(to bottom,#3f91c5,#2e6aae)
          color: $bgcolor-white
        .confirm-active:hover
          background: linear-gradient(to bottom,#4fa0d3,#2e6aae)
        .close:hover
          cursor: pointer
          background: linear-gradient(to top,#e9e9e9,$bgcolor-white)
</style>